<template>
  <div class="use-eye-dropper">
    <div v-if="isSupported">支持颜色拾取器</div>
    <div>拾取的颜色是：{{ sRGBHex }}</div>
    <button @click="open">打开颜色拾取器</button>
  </div>
</template>

<script setup lang="ts">
import { useEyeDropper } from "@vueuse/core";

defineOptions({
  name: "UseEyeDropper"
})
const { isSupported, open, sRGBHex } = useEyeDropper()
</script>

<style scoped lang="css">
.use-eye-dropper {

}
</style>
